<template>
	<view>
		<!-- <free-nav-bar title="通知公告" showBack></free-nav-bar> -->
		<view class="pl-3 pr-3 lineHight-3 dfex border-f5f5f5" v-for="(notice, index) in notices" :key="index" @click="getDiClick(notice.id)">
			<view class="dfes">
				<text v-if="notice.isRead" @click="readNotice(index)" style="color: #FF0000; padding-right: 5px;">●</text>
				<text class="wrap" @click="readNotice(index)"
					:style="{ color: notice.isRead ? '#333' : '#999999' }">{{ notice.title }}</text>
			</view>
			<text class="text-999999 font-14">{{notice.updateTime.slice(0, 10)}}</text>
		</view>
		<view v-if="!hasMore && notices.length > 0" class="text-center mt-3 mb-3">
			<view class="text-muted">没有更多数据了</view>
		</view>
		<view v-else-if="!hasMore && notices.length === 0" class="text-center mt-3 mb-3">
			<view class="text-muted">暂无数据</view>
		</view>
		<view v-else class="text-center mt-3 mb-3">
			<view class="btn btn-primary">加载更多</view>
		</view>
	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js';
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue"
	export default {
		components: {
			freeNavBar
		},
		data() {
			return {
				notices: [],
				form: {
					size: 0,
					pages: 10,
					total: 0 // 总页数
				},
				hasMore: true, // 是否还有更多数据
			}
		},
		onLoad() {
           this.NewList()
		},
		methods: {
			readNotice(index) {
				this.notices[index].isRead = false; // 点击浏览后将未读状态设置为已读
			},
			getDiClick(id){
				uni.navigateTo({
					url:`/pages/touristMode/index/NewListDi?id=${id}`
				})
			},
			NewList() {
				$H.get('/basisInform/platformNotice/visitor/list', {}, {token: false}).then(res => {
					this.notices = res.result.records,
					this.form.total = res.result.pages;
					this.hasMore = this.notices.length < this.form.total;
				}).catch(error => {
					uni.showToast({
						title: "网络错误，请稍后再试",
						icon: 'none'
					});
				});
			},
			loadMore() {
				if (this.form.size >= this.form.total) {
					this.hasMore = false;
					return;
				}
				this.form.size++;
				// 模拟请求数据
				setTimeout(() => {
					this.NewList();
				}, 2000);
			},
			// 下拉刷新
			refresh() {
				this.notices = [];
				this.form.size = 0;
				this.hasMore = true;
				this.NewList();
				uni.$emit('stopPullDownRefresh'); // 结束下拉刷新动画
			},
		}
	}
</script>
<style>
</style>